<template>
  <el-card :body-style="{ padding: '0px' }" class="box-card">
    <div slot="header" class="clearfix">

      <span style="line-height: 36px; font-size: 18px">{{contentTitle }}</span>
      <el-button style="float: right;" v-show='isNeedNewUser' type="primary" size="small" @click="addNewUser" :disabled="!isAdmin">{{$getTextByLangKey('新增用户')}}</el-button>
      <v-clock style="float: right;line-height: 36px;" v-if='showClock'></v-clock>
      <!--<img class='img-tv' style="float: right;" v-show='tv' @click='toTvPage'  src="../../src/common/images/tv.png"/>-->
      <!--<el-button style="float: right;" v-show='tv' @click='toTvPage' size="mini">切换到电视机</el-button>-->
    </div>

    <slot name="action"></slot>
    <slot name="table"></slot>

    <slot name="dialog"></slot>
    <slot name="dialog2"></slot>
    <el-pagination v-if='page' @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" :currentPage="page.currentPage" :pageSize="page.pageSize"
                   layout=" prev, pager, next, jumper" :total="page.total"></el-pagination>

  </el-card>

</template>

<script>


  import clock from '@/base/Clock.vue'


  export default {
    name: "card",
    props: ['contentTitle', 'tv','showClock','page','isNeedNewUser'],
    data() {
      return {
        isAdmin : localStorage.getItem("username") === 'admin',
      }
    },
    components: {
      'v-clock': clock,
    },
    methods: {
      handleSizeChange: function (val) {
        this.$emit("handleSizeChange", val)
      },
      handleCurrentChange: function (val) {
        this.$emit("handleCurrentChange", val)
      },
      addNewUser:function () {
        this.$emit("addNewUser")
      }
//      toTvPage: function () {
//        let path = this.$route.path
//        if (path.startsWith('/wrapper')) {
//          path = path.substring(8)
//          this.$router.push(path)
//        } else {
//        }
//      }
    }
  }
</script>


<style scoped>

  .img-tv{
    width:24px;
    height:24px;
    line-height: 36px;
    cursor: pointer
  }

  /*.img-tv:hover{*/
    /*background-color: #3a8ee6;*/
  /*}*/
  .el-card {
    box-shadow: 0 0;
    border-radius: 0;
    border: none;
    padding: 0 9px;
  }

  .table-slot {
    background-color: red;
  }

  .el-pagination {
    margin-right: 80px;
  }

  .el-card__header {
    padding: 0 20px;
  }
</style>


